<template>
  <div class="login-container">
    <a-card class="login-container-card">
      <!-- 背景图片 -->
      <img src="../../assets/images/login.jpeg" alt="" id="back" />
      <div id="right">
        <h2>光谷智慧交通</h2>
        <!-- 登录界面 -->
        <a-form :model="formState" ref="formRef" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
          autocomplete="off">
          <!-- 用户名 -->
          <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]">
            <a-input v-model:value="formState.username" />
          </a-form-item>
          <!-- 密码 -->
          <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }]">
            <a-input-password v-model:value="formState.password" />
          </a-form-item>
          <!-- 验证码 -->
          <a-form-item class="verify" label="验证码" name="verify">
            <a-input style="height:40px" class="input" placeholder="请输入验证码" v-model:value="formState.verify" />
            <verify-code ref="verifyRef"></verify-code>
          </a-form-item>
          <!-- 登录按钮 -->
          <a-form-item label="　">
            <a-button type="primary" class="submit" @click="getuser">登录</a-button>
            <!-- 重置按钮 -->
            <a-button type="reset" @click="resetForm" class="reset">重置</a-button>
          </a-form-item>
          <!-- 注册 -->
          <a-form-item label="　" id="signin">
            <router-link to="/signin">还没有账户？去注册</router-link>
          </a-form-item>
        </a-form>
      </div>
    </a-card>
  </div>
</template>
<script setup>
import { message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css'; //vite只能用 ant-design-vue/es 而非 ant-design-vue/lib
import { reactive, ref, onMounted } from "vue"
import router from "router/index.js"
import VerifyCode from "./VerifyCode.vue"
import axios from "axios"
import { useStorageUserDataStore } from 'stores/useStorageUserDataStore'
import { storeToRefs } from 'pinia';
import { getAllUser, userSignIn } from "request/user/index.js"
// import { getAllUser } from "../../api/UserLogin"
const verifyRef = ref(null)
const formRef = ref();
const allUser = ref([])
const { onLogin, Persistence } = useStorageUserDataStore()
/* 在onMounted请求数据 */
onMounted(async () => {
  // const user = await getAllUser()
  // console.log(user);
  const a = await userSignIn({
    "user_name": "小处天",
    "user_password": "123",
    "user_type": "traffic",
    "user_onlinestatus": 1,
    "user_isDelete": 1
  })
  console.log(a);
})

let formState = reactive({
  username: "",
  password: "",
  verify: "",
})

/* 验证用户是否注册 */
function getuser() {
  let data = {
    user_name: formState.username,
    user_password: formState.password,
  }
  axios.post("http://localhost:3000/useryornone", data).then((res) => {
    const { code, msg, result } = res.data
    // console.log(msg)
    if (msg == "登录成功") {
      /* 登录成功进入首页 */
      if (
        formState.verify.toLowerCase() ==
        verifyRef.value.childData.toLowerCase()
      ) {
        window.location.href = "/home"
        message.success("登录成功")
        /* 把用户id和类型存进pinia */
        console.log(result[0]);
        onLogin.userId = result[0].user_id
        onLogin.username = result[0].user_name
        onLogin.userType = result[0].user_type
        Persistence()
      } else if (formState.verify == "") {
        message.warning("请输入验证码")
      } else if (
        formState.verify.toLowerCase() !=
        verifyRef.value.childData.toLowerCase()
      ) {
        message.error("验证码错误")
      }
    } else if (msg == "该用户没注册") {
      message.error("用户名或密码错误")
    }
  })
}
const resetForm = () => {
  formRef.value.resetFields();
};
</script>

<style lang="scss"  scope>
.login-container {
  width: 100vw;
  height: 100vh;
  background: rgb(238, 174, 202);
  background: linear-gradient(118deg,
      rgba(238, 174, 202, 1) 0%,
      rgba(134, 202, 232, 1) 51%,
      rgba(236, 187, 118, 1) 100%);
}


.login-container-card {
  min-width: 500px;
  min-height: 500px;
  position: fixed;
  top: 10vh;
  left: 30vw;
  width: 40vw;
  height: 70vh;
  background: #cdd2d500;
  display: flex;
  justify-content: center;
  align-items: center;
}

#back {
  min-width: 475px;
  min-height: 475px;
  width: 38vw;
  height: 64vh;
  border-right: 1px solid #999;
}

#right h2 {
  position: absolute;
  top: -70px;
  right: -1px;
  width: 39vw;
  height: 10vh;
  line-height: 10vh;
  text-align: center;
  color: rgb(14, 13, 13);
  font-family: "STXingkai";
  font-size: 40px;
}

#right .ant-form {
  position: absolute;
  top: 18vh;
  right: 5vw;
  min-width: 350px;
  min-height: 300px;
}


.submit,
.reset {
  width: 7vw;
  height: 5vh;
  border-radius: 5px;
  color: #fff;
  border-color: #14b4c9;
  background: #14b4c9;
  font-weight: 700;
  margin-right: 5vw;
}

.ant-form-item-control-input-content {
  display: flex;

  .input {
    flex: 1;
  }
}
</style>
